<template>
  <div class="order-detail-container">
    <el-row class="detail-header">
      <el-col :span="10">
        <div class="order-status">订单状态：{{ orderInfo.orderStatus }}</div>
        <div class="order-sub-status" v-if="orderInfo.orderProcessTip&&orderInfo.orderProcessTip!=''">
          <span>{{orderInfo.orderProcessTip}}</span>
          <!-- <i class="el-icon-watch"></i><span style="color: #D81E06;">1小时15分23秒</span> -->
        </div>
      </el-col>
      <el-col :span="10" class="detail-steps">
        <el-steps :active="currActive" finish-status="success">
          <el-step v-for="item in allStep" :title="item.label" :key="item.value"></el-step>
        </el-steps>
      </el-col>
      <el-col :span="4"><div class="btns">
        <el-button type="primary" size="small" class="closeDeal" @click="closeDealTapped" v-if="orderInfo.buttons.length != 0">关闭处理</el-button>
        <el-button type="primary" size="small" class="closeView" @click="closeTable">返回</el-button>
      </div></el-col>
    </el-row>
    <div class="detail-four-part">
      <div class="onePart">
        <div class="partTitle">交易信息</div>
        <div class="partLine"><div class="partTip">订单编号：</div><div class="partText">{{orderInfo.orderIdVO}}</div><i class="el-icon-copy-document" @click="copyText"></i></div>
        <div class="partLine"><div class="partTip">交易编号：</div><div class="partText">{{orderInfo.orderPayId}}</div></div>
        <div class="partLine"><div class="partTip">生成时间：</div><div class="partText">{{orderInfo.orderCreateTime}}</div></div>
        <div class="partLine"><div class="partTip">付款时间：</div><div class="partText">{{orderInfo.orderPayTime}}</div></div>
      </div>
      <div class="onePart">
        <div class="partTitle">预约信息</div>
        <div class="partLine"><div class="partTip">预约人：</div><div class="partText">{{orderInfo.userInfo.appointmentName}}</div></div>
        <div class="partLine"><div class="partTip">手机号码：</div><div class="partText">{{orderInfo.userInfo.appointmentTel}}</div></div>
        <div class="partLine"><div class="partTip">预约备注：</div><div class="partText">{{orderInfo.userInfo.appointmentDesc}}</div></div>
      </div>
      <div class="onePart">
        <div class="partTitle">服务信息</div>
        <div class="partLine"><div class="partTip">被服务人：</div><div class="partText">{{orderInfo.serveInfo.servePerson}}</div></div>
        <div class="partLine"><div class="partTip">手机号码：</div><div class="partText">{{orderInfo.serveInfo.serveTel}}</div></div>
        <div class="partLine"><div class="partTip">服务地址：</div><div class="partText">{{orderInfo.serveInfo.serveAddress}}</div></div>
        <div class="partLine"><div class="partTip">服务时间：</div><div class="partText">{{orderInfo.serveInfo.serveTime}}</div></div>
      </div>
      <div class="onePart">
        <div class="partTitle">护士信息</div>
        <template v-for="nurseInfo in orderInfo.nurseInfo">
          <div class="partLine"><div class="partTip">接单护士：</div><div class="partText">{{nurseInfo.name + '('+nurseInfo.id+')'}}</div></div>
          <div class="partLine"><div class="partTip">手机号码：</div><div class="partText">{{nurseInfo.tel}}</div></div>
        </template>
        <div class="partLine"><div class="partTip">结算备注：</div><div class="partText">{{orderInfo.orderPayTip}}</div></div>
      </div>
      <div class="onePart closePart" v-if="orderInfo.orderError">
        <div class="partTitle">交易关闭</div>
        <div class="partLine"><div class="partTip">操作护士：</div><div class="partText">{{  }}</div></div>
        <div class="partLine"><div class="partTip">操作时间：</div><div class="partText">{{  }}</div></div>
        <div class="partLine"><div class="partTip">关闭原因：</div><div class="partText">{{orderInfo.orderError}}</div></div>
        <div class="partLine"><div class="partTip">补充说明：</div><div class="partText">{{  }}</div></div>
      </div>
    </div>
    <el-table class="order-detail-table" :data="tableData" style="width: 100%;" row-key="id" default-expand-all
      :tree-props="{children: 'children'}">
      <el-table-column prop="name" label="项目" header-align="center">
        <template slot-scope="scope">
          <template v-if="!!scope.row.children"><div class="nameP">{{ scope.row.name }}</div></template>
          <template v-else>
            <div class="name">{{ scope.row.name }}</div><div v-if="!!scope.row.combName" class="combName">{{ scope.row.combName }}</div>
            <div class="source" v-if="!!scope.row.source">{{ scope.row.source }}</div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <div class="combName">{{ (!!scope.row.price)?'￥'+convertMoney(scope.row.price):'' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="数量" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <div class="combName">{{ (!!scope.row.num)?'x'+scope.row.num:'' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="preMoney" label="预付" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <div :class="(!!scope.row.children)?'nameP':'name'">{{ (!!scope.row.preMoney)?'￥'+convertMoney(scope.row.preMoney):'' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="bill" label="账单" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <div :class="(!!scope.row.children)?'nameP':'name'">{{ (!!scope.row.bill)?'￥'+convertMoney(scope.row.bill):'' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="real" label="实付" width="150" header-align="center" align="center">
        <template slot-scope="scope">
          <div :class="{nameP:(!!scope.row.children),name:!scope.row.children,
              refusePay:(scope.row.source=='护士端')&&orderInfo.orderError&&orderInfo.orderError.indexOf('拒付尾款')!=-1}">
            {{ (!!scope.row.real)?'￥'+convertMoney(scope.row.real):'' }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="total-area">
      <div class="partLine"><div class="partTip">预付合计：</div><div class="partText">￥{{ convertMoney(orderInfo.orderInfo.totalAmount) }}</div></div>
      <div class="partLine"><div class="partTip">实际发生：</div><div class="partText">￥{{ convertMoney(orderInfo.orderInfo.totalActual) }}</div></div>
      <div class="partLine" :class="orderInfo.orderInfo.totalDifference<0?'refund':'plusMoney'">
        <div class="partTip">{{orderInfo.orderInfo.totalDifference<0?'退款':'补差'}}：</div>
        <div class="partText">{{orderInfo.orderInfo.totalDifference<0?'-':''}}￥{{ (convertMoney(orderInfo.orderInfo.totalDifference)+'').replace('-','') }}</div></div>
    </div>
    <el-row class="order-detail-picture-area">
      <el-col :span="8">
        <div class="picture-title">就医证明({{orderInfo.proofsInfo.medicalImages.length}}/8)</div>
        <div class="picture-area">
          <template >
            <image-preview v-for="(src,srcIndex) in orderInfo.proofsInfo.medicalImages" class="picture-area-image" :src="src" :key="srcIndex"
                           :preview-src-list="orderInfo.proofsInfo.medicalImages"/>
          </template>
          <!--<el-image v-for="(src,srcIndex) in orderInfo.proofsInfo.medicalImages" class="picture-area-image" :src="src" :key="srcIndex"-->
          <!--  :preview-src-list="orderInfo.proofsInfo.medicalImages"></el-image>-->
          <div v-if="orderInfo.proofsInfo.medicalImages.length == 0" class="nullDataText">{{ orderInfo.proofsInfo.medicalTips }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="picture-title">耗材购买证明({{orderInfo.proofsInfo.consumeImages.length}}/8)</div>
        <div class="picture-area">
          <template >
            <image-preview class="picture-area-image" v-for="(src,srcIndex) in orderInfo.proofsInfo.consumeImages" :src="src" :key="srcIndex"
                           :preview-src-list="orderInfo.proofsInfo.consumeImages"/>
          </template>
          <!--<el-image class="picture-area-image" v-for="(src,srcIndex) in orderInfo.proofsInfo.consumeImages" :src="src" :key="srcIndex" -->
          <!--  :preview-src-list="orderInfo.proofsInfo.consumeImages"></el-image>-->
          <div v-if="orderInfo.proofsInfo.consumeImages.length == 0&&orderInfo.proofsInfo.needUploadConsume" class="nullDataText">{{ orderInfo.proofsInfo.consumeTips }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="picture-title">账单说明({{orderInfo.checkInfo.checkImages.length}}/8)</div>
        <div class="picture-area">
          <template >
            <image-preview class="picture-area-image" v-for="(src,srcIndex) in orderInfo.checkInfo.checkImages" :key="srcIndex"
                           :src="src" :preview-src-list="orderInfo.checkInfo.checkImages"/>
          </template>
          <!--<el-image class="picture-area-image" v-for="(src,srcIndex) in orderInfo.checkInfo.checkImages" :key="srcIndex" -->
          <!--  :src="src" :preview-src-list="orderInfo.checkInfo.checkImages"></el-image>-->
        </div>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dealVisible" width="500" height="265"class="dealDiag" append-to-body>
      <div slot="title" class="track-header"><i class="el-icon-edit"></i><span>处理</span></div>
      <div class="flex-row">
        <div class="dealTip"><span style="color: red;">*</span>关闭原因</div>
        <el-select class="dealCon" v-model="dealForm.reason" clearable placeholder="请选择关闭原因">
          <el-option  v-for="item in allReason" :key="item.id"  :label="item.reason"  :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="flex-row">
        <div class="dealTip">补充说明</div>
        <el-input class="dealCon" type="textarea" v-model="dealForm.remark" placeholder="请输入"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dealVisible = false">取消</el-button>
        <el-button class="saveDeal" type="primary" size="small"  @click="saveDealTapped">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { convertToCNY} from "@/utils/currency";
  import { getStopReason,getOrderInfo,orderStop} from "@/api/service/ordermanage";
  export default {
    name: "OrderDetail",
    props: ["row"],
    data() {
      return {
        loading:false,
        currActive:0,
        dealVisible:false,
        dealForm:{reason:'',remark:''},
        rules:{
          reason: [
            { required: true, message: '请选择关闭原因', trigger: 'blur' }
          ],
        },
        allStep:[{ label: '下单', value: 'create' },{ label: '付款', value: 'new' },{ label: '派单', value: 'dispatch' },
          { label: '接单', value: 'unserved' },{ label: '服务', value: 'serving' },
          { label: '结算', value: 'unsettled' },{ label: '完成/关闭', value: 'settled' }],
        allReason:[],
        orderInfo:{},
        tableData: [{ id: 1, name: '服务费', preMoney:'', bill:'', real:'', children: [] }, {
          id: 2, name: '耗材费', preMoney:'', bill:'', real:'', children: []}, {
          id: 3, name: '车程费', preMoney:'', bill:'', real:'', children: []}],
        preFlag:false,
        actFlag:false,
        realFlag:false
      };
    },
    created() {
      this.getOrderInfoData();
      this.getCloseReason()
    },
    watch:{
      'row':function(newVal,oldVal) {
        this.getOrderInfoData();
        this.dealForm = {reason:'',remark:''}
      },
    },
    methods: {
      getCloseReason(){
        let params = {}
        getStopReason(params).then(response => {
          if(response.code!=200){
            this.$message.error(response.msg);
            return
          }
          this.allReason = response.data;
        }).catch(res => {
          this.$message.error(res);
        });
        //this.allReason = [{"reason": "沟通无果 拒付尾款", "id": 1},{"reason": "订单异常","id": 3}]
      },
      getOrderInfoData(){
        this.loading = true;
        let params = {orderId:this.row.orderId}
        getOrderInfo(params).then(response => {
          this.loading = false;
          if(response.code!=200){
            this.orderInfo = {}
            this.tableData = [{ id: 1, name: '服务费', preMoney:'', bill:'', real:'', children: [] }, {
              id: 2, name: '耗材费', preMoney:'', bill:'', real:'', children: []}, {
              id: 3, name: '车程费', preMoney:'', bill:'', real:'', children: []}],
            this.$message.error(response.msg);
            return
          }
          this.dealDetailData(response)
        }).catch(res => {
          this.loading = false;
          this.$message.error(res);
        });
      },
      dealDetailData(response){
        this.orderInfo = response.data
        this.preFlag = this.orderInfo.preFlag
        this.actFlag = this.orderInfo.actFlag
        let orderCode = this.orderInfo.orderCode
        this.realFlag = (orderCode=='settled'||orderCode=='finish'||(this.orderInfo.orderError&&this.orderInfo.orderError.indexOf("拒付尾款")!=-1)) //已结算或已完成 或拒付尾款
        //this.$message.error(JSON.stringify(response.data));
        this.currActive = this.orderInfo.process - 1
        let serviceItems = this.orderInfo.orderInfo.serviceItems
        let packageItems = this.orderInfo.orderInfo.packageItems
        let taxiItems = this.orderInfo.orderInfo.taxiItems
        let taxiArr = []
        for (var i = 0; i < taxiItems.items.length;i++) {
          let item = taxiItems.items[i]
          taxiArr.push({id: item.type,
            name: item.type == 'goto'?'去程':'回程',
            source:'',
            price: '',
            num:'',
            preMoney:item.amount,
            bill:'',
            real:''})
        }
        this.tableData = [{
          id: 1,
          name: '服务费',
          preMoney:this.preFlag?serviceItems.pre:"",
          bill:this.actFlag?serviceItems.bill:"",
          real:this.realFlag?serviceItems.amount:"",
          children: this.dealtableData(serviceItems.items)
        }, {
          id: 2,
          name: '耗材费',
          preMoney:this.preFlag?packageItems.pre:"",
          real:this.realFlag?packageItems.amount:"",
          bill:this.actFlag?packageItems.bill:"",
          children: this.dealtableData(packageItems.items)
        }, {
          id: 3,
          name: '车程费',
          preMoney:this.preFlag?taxiItems.pre:"",
          real:this.realFlag?taxiItems.amount:"",
          bill:this.actFlag?taxiItems.bill:"",
          children: this.preFlag?taxiArr:[]
        }]
      },
      dealtableData(items){
        let destItems = []
        for (var i = 0; i < items.length;i++) {
          let item = items[i]
          let dict = {
            id: item.id,
            name: item.name,
            source:item.fromNur?'护士端':'患者端',
            price: item.price,
            num:item.count,
            preMoney:this.preFlag?item.pre:0,
            bill:this.actFlag?item.bill:'',
            real:this.realFlag?item.amount:''
          }
          destItems.push(dict)
        }
        return destItems
      },
      closeTable(){
        this.$emit("CloseTable");
      },
      closeDealTapped(){
        this.dealVisible = true
      },
      saveDealTapped(){
        if(this.dealForm.reason == ''){
          this.$message.error('请选择关闭原因');
          return
        }
        let params = {"orderId": this.orderInfo.orderId,"reasonId": this.dealForm.reason,"remark": this.dealForm.remark}
        orderStop(params).then(response => {
          if(response.code!=200){
            this.$message.error(response.msg);
            return
          }
          this.dealVisible = false
          this.getOrderInfoData();
        }).catch(res => {
          this.$message.error(res);
        });

      },
      async copyText() {
        try {
          await navigator.clipboard.writeText(this.orderInfo.orderIdVO);
          this.$message.success('复制成功');
        } catch (err) {
          console.error('复制失败', err);
          this.$message.error('复制失败');
        }
      },
      convertMoney(amount){
        return convertToCNY(amount)
      }
    }
  };
  </script>

<style lang="scss">
.order-detail-container{
  .detail-header{
    padding: 0 15px;
    .order-status{
      font-weight: bold;
      font-size: 20px;
      color: #101010;
      margin-top: 15px;
    }
    .order-sub-status{
      margin-top: 15px;
      padding: 0 13px;
      width: fit-content;
      height: 30px;
      line-height: 30px;
      border-radius: 2px;
      background: #F8F8F8;
      font-size: 14px;
      color: #101010;
      .el-icon-watch{
        font-size: 18px;
        color: #D81E06 ;
      }
    }
  }
  .detail-steps{
    margin-top: 10px;
    .el-step__title{
      white-space: nowrap;
    }
    .el-step__head{
      margin-top: 36px;
    }
    .el-step__main{
      position: absolute;
      top: 0;
      left: -5px;
    }
    .el-step__head.is-success{
      .el-step__line-inner{
        border-color: #CECECE;
      }
      .el-step__icon.is-text{
        border-color: #3399F4;
      }
      .el-step__icon-inner{
        color: #3399F4;
      }
    }
    .el-step__head.is-process{
      .el-step__icon.is-text{
        border-color: #3399F4;
        background-color: #3399F4;
      }
      .el-step__icon-inner{
        color: #FFFFFF;
      }
      .el-step__line-inner{
        border-color: #CECECE;
      }
    }
    .el-step__head.is-wait{
      .el-step__icon.is-text{
        border-color: #CECECE;
        background-color: #CECECE;
      }
      .el-step__icon-inner{
        color: #FFFFFF;
      }
      .el-step__line-inner{
        border-color: #CECECE;
      }
    }
    .el-step__title.is-success,.el-step__title.is-process,.el-step__title.is-wait{
      color: #9A9A9A;
    }

  }
  .btns{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
  }
  .closeDeal,.closeView{
    padding-top: 0;
    padding-bottom: 0;
    height: 30px;
    line-height: 30px;
  }
  .closeView.el-button--primary{
    background-color: #CECECE ;
    border-color: #CECECE ;
  }
  .detail-four-part{
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
    .onePart{
      width: 320px;
      height: 204px;
      background-color: #F2F3FF;
      margin-left: 10px;
      padding: 15px;
      .partTitle{
        font-size: 16px;
        color: #101010;
      }
    }
    .onePart.closePart{
      background-color: rgba(244, 206, 152, 0.3);
    }
  }
  .partLine{
    display: flex;
    margin-top: 10px;
    font-size: 14px;
    color: #101010;
    line-height: 22px;
    .partTip{
      width: 70px;
      text-align: right;
      color: #9A9A9A;
    }
    .partText{
      max-width: calc(100% - 70px);
    }
    .el-icon-copy-document{
      color: #0979DE;
      font-size: 16px;
    }
  }
  .order-detail-table{
    .el-table__row.expanded.el-table__row--level-0{
      background: #F8F8F8;
    }
    .name,.nameP{
      display: inline-block;
      color: #101010;
      font-size: 14px;
    }
    .name.refusePay{
      color: #F54343;
    }
    .nameP{
      font-weight: bold;
    }
    .combName{
      display: inline-block;
      color: #BBBBBB;
      font-size: 14px;
      margin-left: 10px;
    }
    .source{
      display: inline-block;
      width: 60px;
      height: 20px;
      line-height: 20px;
      border-radius: 10px;
      text-align: center;
      border: 1px solid #DBDBDB;
      color: #BEBEBE;
      font-size: 13px;
      margin-left: 10px;
    }
  }
  .order-detail-table.el-table .el-table__header-wrapper th,
  .order-detail-table.el-table .el-table__fixed-header-wrapper th{
    background-color: #F2F3FF ;
  }
  .total-area {
    padding-right: 20px;
    border-bottom: solid 1px #dfe6ec;
    .partLine{
      justify-content: flex-end;
    }
    .refund .partText{
      color: #3AB54A;
    }
    .plusMoney .partText{
      color: #F54343;
    }
  }
  .order-detail-picture-area{
    padding: 20px 0px;
    .picture-title{
      color: #101010;
      font-size: 16px;
      font-weight: bold;
      margin-left: 10px;
    }
    .picture-area{
      overflow-x: scroll;
      white-space: nowrap;
      margin-left: 10px;
      margin-top: 10px;
      height: 100px;
      .picture-area-image{
        width: 100px;
        height: 100px;
        margin-left: 10px;
        display: inline-block;
      }
      .nullDataText{
        width: 100%;
        margin-top: 30px;
        text-align: center;

      }
    }
  }
}
.dealDiag{
  .el-dialog__header{
    padding: 10px;
    border-bottom: solid 1px #DBDBDB;
    .el-dialog__headerbtn{
      top: 10px;
      right: 10px;
    }
  }
  .el-dialog__body{
    padding-top: 10px;
    padding-bottom: 10px;
    .flex-row{
      display: flex;
      margin-top: 10px;
      .dealTip{
        width: 65px;
        margin-right: 10px;
        height: 30px;
        line-height: 40px;
      }
      .dealCon{
        flex: 1;
      }
    }
  }
  .dialog-footer{
    text-align: center;
  }

  }
</style>
